<template>
  <!-- 使用vant组件实现导航滚动即点击高亮 -->
  <div class="van-nav">
    <div class="tabs-wrap">
      <!-- 滚动区域,长tab -->
      <van-tabs v-model:active="active" scrollspy sticky>
        <van-tab v-for="index in 8" :key="index" :title="'标签 ' + index"> 内容 {{ index }} </van-tab>
      </van-tabs>
    </div>
    <!-- 吸顶 -->
    <van-sticky :offset-top="0">
      <van-icon name="arrow-down" />
    </van-sticky>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(0)
</script>

<style lang="less" scoped>
@baseSize: 3.75vmin; //使用vmin根据屏幕最小适配
.van-nav {
  font-size: (14 / @baseSize);
  display: flex;
  justify-content: space-between;
  align-items: center; // 让箭头垂直居中
  height: (40 / @baseSize); //计算加括号
  background: #fff;
  .tabs-wrap {
    flex: 1;
    height: 100%;
  }
  :deep(.van-icon-arrow-down) {
    text-align: center;
    &::before {
      width: (40 / @baseSize);
      height: (44 / @baseSize);
      line-height: (44 / @baseSize);
      background: #fff;
    }
  }
}
:deep(.van-tabs__content) {
  padding: (16 / @baseSize);
}
.van-tab__panel {
  height: (500 / @baseSize); //需要设置高度
}
</style>
